<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<!-- eslint-disable @typescript-eslint/explicit-function-return-type -->
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getArtDetail } from '@renderer/api/art'

const router = useRouter()
const route = useRoute()
const id = ref(0)
const detail: any = ref({})
let content: any = ref('')

// 挂在完成功获取数据
onMounted(async () => {
  id.value = Number(route.query.id)
  await getDetail()
})

// 处理编辑器内容超出问题
const newContent = computed(() => {
  return content.value.replace(/<img(.*?)>/g, (_match, src) => {
    return `<img${src} style="max-width:100%">`;
  })
})

// 获取详情
const getDetail = async () => {
  let reqData = {
    id: id.value
  }
  let detailResult = await getArtDetail(reqData)
  detail.value = detailResult.data[0]
  content.value = detail.value.content
}

// 返回上一级
const goBack = () => {
  router.back()
}

</script>

<template>
  <div class="title-box">
    <div class="back" @click="goBack">
      <el-icon size="28">
        <ArrowLeftBold />
      </el-icon>
    </div>
    <div class="title">{{ detail.name }}</div>
  </div>
  <div class="time">更新时间：{{ detail.createtime }}</div>
  <div v-html="newContent"></div>
</template>

<style scoped lang="scss">
.title-box{
  text-align: center;
  font-size: 36px;
  box-sizing: border-box;
  position: relative;
  .back{
    position: absolute;
    left: 0;
    cursor: pointer;
  }
  .title{
    padding: 0 80px;
    word-break: break-all;
  }
}
.time{
  color: #999;
  padding: 20px 0;
  box-sizing: border-box;
}
</style>
